<template>
  <el-dialog
    v-el-drag-dialog
    :modal="false"
    width="800px"
    :title="formName"
    :visible="show"
    @update:visible="updateShow"
    destroy-on-close
  >
    <el-form
      ref="xdataForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="130px"
    >
      <div v-for="(item, index) in form.list" :key="index">
        <el-form-item
          label="按钮名称"
          :prop="`list.${index}.BtnName`"
          :rules="rules.BtnName"
        >
          <el-input v-model="item.BtnName" style="width: 500px" />
        </el-form-item>
        <el-form-item
          label="按钮编码"
          :prop="`list.${index}.BtnCode`"
          :rules="rules.BtnCode"
        >
          <el-input v-model="item.BtnCode" style="width: 500px" />
        </el-form-item>
        <el-form-item>
          <el-button @click="delItem(index)"> 删除 </el-button>
        </el-form-item>
        <el-divider></el-divider>
      </div>
      <el-form-item>
        <el-button type="primary" @click="addItem"> 继续添加 </el-button>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="updateShow(false)"> 取消 </el-button>
      <el-button type="primary" @click="save"> 保存 </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { deepClone } from '@/utils'
import { saveSystemButton } from '@/api/system/system-button'
import { mapState } from 'vuex'

export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default () {
        return false
      }
    },
    formData: {
      type: Object,
      default () {
        return {}
      }
    },
    menuId: {
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      form: {
        list: []
      },
      formTmpl: {},
      rules: {
        BtnCode: [
          { required: true, message: '编码必填', trigger: 'blur' },
          { min: 1, max: 50, message: '编码长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        BtnName: [
          { required: true, message: '名称必填', trigger: 'blur' },
          { min: 1, max: 50, message: '名称长度在 1 到 50 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  computed: {
    formName () {
      if (this.form.Id) {
        return '编辑'
      }
      return '新增'
    },
    ...mapState({
      userId: state => state.user.id,
    }),
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler (val) {
        if (this.$refs['xdataForm']) {
          this.$refs['xdataForm'].clearValidate()
        }
        this.form.list = []
        this.addItem()
        // this.form = deepClone({...this.formTmpl, ...val})
      }
    }
  },
  methods: {
    addItem () {
      this.form.list.push({
        MenuId: this.menuId,
        BtnCode: '',
        BtnName: ''
      })
    },
    delItem (idx) {
      this.form.list.splice(idx, 1)
    },
    updateShow (val) {
      this.$emit('update:show', val)
    },
    afterSave () {
      this.$notify({
        title: '操作成功',
        message: 'success',
        type: 'success',
        duration: 2000
      })
      this.updateShow(false)
      this.$emit('finish')
    },
    save () {
      this.$refs['xdataForm'].validate((valid) => {
        const formData = deepClone(this.form.list)
        if (valid) {
          if (this.form.Id) {
            saveSystemButton(formData).then(() => {
              this.afterSave()
            })
          } else {
            saveSystemButton(formData).then(() => {
              this.afterSave()
            })
          }
        }
      })
    }
  }
}
</script>
